<template>
  <div>
    <!-- 分类查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="查询类型">
        <el-select v-model="formInline.categoryId" placeholder="查询类型">
          <el-option label="设备" value=1></el-option>
          <el-option label="物料" value=3></el-option>
          <el-option label="工具" value=2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" style="margin: 0 10px" @click="reset">重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 新增功能 -->
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <!-- 新增功能弹窗 -->
    <div>
      <el-dialog title="新增Rfid标签" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
        <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="140px">
          <el-form-item label="操作对象类型" prop="targetType">
            <el-input v-model="addForm.targetType"></el-input>
          </el-form-item>
          <el-form-item label="对象类目id" prop="targetCategoryId">
            <el-input v-model="addForm.targetCategoryId"></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="addForm.creator"></el-input>
          </el-form-item>
          <el-form-item label="描述信息" prop="des">
            <el-input v-model="addForm.des"></el-input>
          </el-form-item>
          <el-form-item label="标签内部信息" prop="rfidInfo">
            <el-input v-model="addForm.rfidInfo"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 表格渲染 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="labelId" label="标签ID" width="180"></el-table-column>
        <el-table-column prop="typeName" label="操作对象类型" width="180"></el-table-column>
        <el-table-column prop="targetCategoryId" label="对象类目id" width="180"></el-table-column>
        <el-table-column prop="creatorName" label="创建人" width="180"></el-table-column>
        <el-table-column prop="operatorName" label="操作人" width="180"></el-table-column>
        <el-table-column prop="des" label="描述信息"></el-table-column>
        <el-table-column prop="rfidInfo" label="标签内部信息" width="180"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页功能 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :current-page="current" :page-size="size"
        :total="total">
      </el-pagination>
    </div>
    <!-- 编辑功能弹窗 -->
    <div>
      <el-dialog title="编辑Rfid标签" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose">
        <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="140px">
          <el-form-item label="操作对象类型" prop="targetType">
            <el-input v-model="editForm.targetType"></el-input>
          </el-form-item>
          <el-form-item label="对象类目id" prop="targetCategoryId">
            <el-input v-model="editForm.targetCategoryId"></el-input>
          </el-form-item>
          <el-form-item label="操作人" prop="operator">
            <el-input v-model="editForm.operator"></el-input>
          </el-form-item>
          <el-form-item label="描述信息" prop="des">
            <el-input v-model="editForm.des"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getRfidData,
  getRfidThreeData,
  addRfidData,
  deleteRfidData,
  editRfidData,
} from "@/api/Rfid";
export default {
  data() {
    return {
      tableData: [],
      // 分类查询
      formInline: {
        categoryId: null,
      },
      // 分页数据
      current: 1,
      size: 10,
      total: 100,
      addDialogVisible: false,
      addForm: {
        labelId: "",
        targetType: "",
        targetCategoryId: "",
        creator: "",
        operator: "",
        des: "",
        rfidInfo: "",
      },
      addRules: {
        targetType: [
          { required: true, message: "请输入操作对象类型", trigger: "blur" },
        ],
        targetCategoryId: [
          { required: true, message: "请输入对象类目id", trigger: "blur" },
        ],
        creator: [{ required: true, message: "请输入创建人", trigger: "blur" }],
        des: [{ required: true, message: "请输入描述信息", trigger: "blur" }],
        rfidInfo: [
          { required: true, message: "请输入标签内部信息", trigger: "blur" },
        ],
      },
      editDialogVisible: false,
      editForm: {
        labelId: "",
        targetType: "",
        targetCategoryId: "",
        operator: "",
        des: "",
      },
      editRules: {
        targetType: [
          { required: true, message: "请输入操作对象类型", trigger: "blur" },
        ],
        targetCategoryId: [
          { required: true, message: "请输入对象类目id", trigger: "blur" },
        ],
        operator: [
          { required: true, message: "请输入操作人", trigger: "blur" },
        ],
        des: [{ required: true, message: "请输入描述信息", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getRfid();
  },
  methods: {
    // 获取RFID标签列表
    async getRfid() {
      const res = await getRfidData({
        pageNum: this.current,
        pageSize: this.size,
      });
      if (res.data.code === 200) {
        this.total = res.data.data.data.total;
        console.log(res);
        this.tableData = res.data.data.data.records;
      } else {
        // 显示失败原因
        this.$message.error(res.data.message || "获取列表失败");
      }
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      if(this.formInline.categoryId){
        this.getRfidThree();
      }else{
        this.getRfid();
      }
      
    },
    handleSizeChange(val) {
      this.size = val;
      this.current = 1;
            if(this.formInline.categoryId){
        this.getRfidThree();
      }else{
        this.getRfid();
    }},
    // 分类查询功能
    async getRfidThree() {
      const res = await getRfidThreeData({
        pageNum: this.current,
        pageSize: this.size,
        targetType: this.formInline.categoryId,
      });
      if (res.data.code === 200) {
        this.total = res.data.data.data.total;
        console.log(res);
        this.tableData = res.data.data.data.records;
      }
    },
    async onSubmit(){
      await this.getRfidThree();
    },
    
    reset() {
      this.formInline = {
        categoryId: null,
      };
      this.getRfid();
    },
    // 新增功能
    async handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        targetType: "",
        targetCategoryId: "",
        creator: "",
        des: "",
        rfidInfo: "",
      };
    },
    async save() {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) {
          // 如果验证不通过，则显示错误提示并返回
          this.$message.error("请检查输入项是否符合要求");
          return;
        }

        // 表单验证通过后执行新增逻辑
        const res = await addRfidData(this.addForm);
        if (res.data.code !== 200) {
          this.$message.error("新增失败");
          return;
        } else {
          this.$message.success("新增成功");
          this.addDialogVisible = false;
          await this.getRfid();
        }
      });
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    async handleDelete(row) {
      try {
        await this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const res = await deleteRfidData(row.labelId);
        // console.log(res);
        // await this.getRfid();
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          await this.getRfid();
        } else {
          this.$message.error(res.data.message || "删除失败");
        }
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败");
        }
      }
    },
    // 编辑功能
    handleEdit(row) {
      this.editDialogVisible = true;
      this.editForm = {
        labelId: row.labelId,
        targetType: row.targetType,
        targetCategoryId: row.targetCategoryId,
        operator: row.operator,
        des: row.des,
      };
    },
    async update() {
      this.$refs.editForm.validate(async (valid) => {
        if (!valid) {
          // 如果验证不通过，则显示错误提示并返回
          this.$message.error("请检查输入项是否符合要求");
          return;
        }
        const res = await editRfidData(this.editForm);
        console.log(res);

        if (res.data.code !== 200) {
          // this.$message.error(res.data.message || '更新失败')
          this.$message.error("更新失败");
          return;
        } else {
          this.$message.success("更新成功");
          console.log(res);
          this.editDialogVisible = false;
          await this.getRfid();
        }
      });
    },
  },
};
</script>
